<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>拖拽接口使用_1</title>

    <style>
        #onediv {
            width: 200px;
            height: 200px;
            border-width: 1px;
            border-color: aqua;
            border-style: solid;
            float: left;
        }

        #twodiv {
            width: 200px;
            height: 200px;
            border-width: 1px;
            border-color: red;
            border-style: solid;
            float: left;
            margin-left: 10px;
        }

        #oneP {
            margin: auto;
            display: block;
            width: 60%;
            text-align: center;
            /*vertical-align: center;*/
            /*horiz-align: center;*/

            /*top: 50%;*/
            /*left: 50%;*/
            /*position: absolute;*/
            /*transform: translate(-50%,-50%);*/
        }

    </style>
</head>
<body>


<div id="onediv">
    <p id="oneP" draggable="true">鼠标拖拽我试试</p>
</div>


<div id="twodiv">

</div>


<!--
     拖拽事件:
     在拖动目标上触发事件 (源元素):
     ondragstart:   用户开始拖动元素时触发
     ondrag:        元素正在拖动时触发
     ondragend:     用户完成元素拖动后触发

     释放目标时触发的事件:
     ondragenter:   当被鼠标拖动的对象进入其容器范围内时触发此事件
     ondragover:    当某被拖动的对象在另一对象容器范围内拖动时触发此事件
     ondragleave:   当被鼠标拖动的对象离开其容器范围内时触发此事件
     ondrop:        在一个拖动过程中，释放鼠标键时触发此事件


    -->
<script>


    var oneP = document.querySelector("#oneP");

    oneP.ondragstart = function () {

    }

    oneP.ondragend = function () {
    }

    oneP.ondragleave = function (event) {
    }

    oneP.ondrag = function () {

    }


    var twodiv = document.querySelector("#twodiv");

    // 浏览器默认会阻止这个事件
    twodiv.ondrop = function (event) {
        event.target.appendChild(oneP);
    }

    twodiv.ondragenter = function (event) {

    }

    twodiv.ondragover = function (event) {
        event.preventDefault();
    }


    var onediv = document.querySelector("#onediv");
    onediv.ondrop = function (event) {
        event.target.appendChild(oneP);
    }
    onediv.ondragover = function (event) {
        event.preventDefault();
    }


</script>

</body>
</html>
